<template>
  <view class="franchise-apply-container">
    <!-- 导航栏 -->
    <nav-bar title="加盟申请" backUrl="/pages/collaboration/franchise"></nav-bar>
    
    <!-- 表单内容 -->
    <view class="form-container">
      <view class="form-title">请填写以下信息，我们会尽快与您联系</view>
      
      <view class="form-group">
        <view class="form-item">
          <text class="label">店铺名称</text>
          <input class="input" type="text" v-model="formData.storeName" placeholder="请输入店铺名称" />
        </view>
        
        <view class="form-item">
          <text class="label">门店Logo</text>
          <view class="upload-box" @tap="chooseImage('logo')">
            <image v-if="formData.logoUrl" :src="this.formData.logoUrl" mode="aspectFill" class="preview-image"></image>
            <view v-else class="upload-placeholder">
              <text class="upload-icon">+</text>
              <text class="upload-text">上传Logo</text>
            </view>
          </view>
        </view>
        
        <view class="form-item">
          <text class="label">门店头图</text>
          <view class="upload-box" @tap="chooseImage('banner')">
            <image v-if="formData.bannerUrl" :src="this.formData.bannerUrl" mode="aspectFill" class="preview-image"></image>
            <view v-else class="upload-placeholder">
              <text class="upload-icon">+</text>
              <text class="upload-text">上传头图</text>
            </view>
          </view>
        </view>
        
        <view class="form-item">
          <text class="label">联系电话</text>
          <input class="input" type="number" v-model="formData.phone" placeholder="请输入联系电话" maxlength="11" />
        </view>
        
        <view class="form-item">
          <text class="label">详细地址</text>
          <view class="address-input">
            <input class="input" type="text" v-model="formData.address" placeholder="请输入详细地址" disabled />
            <view class="location-btn" @tap="chooseLocation">定位</view>
          </view>
        </view>
        
        <view class="form-item">
          <text class="label">经纬度</text>
          <view class="coordinate-box">
            <text class="coordinate-text">经度: {{formData.longitude || '未获取'}}</text>
            <text class="coordinate-text">纬度: {{formData.latitude || '未获取'}}</text>
          </view>
        </view>
        
        <view class="form-item">
          <text class="label">营业时间</text>
          <view class="time-picker">
            <picker mode="time" :value="formData.openTime" @change="onOpenTimeChange">
              <view class="picker-value">{{ formData.openTime || '开始时间' }}</view>
            </picker>
            <text class="time-separator">至</text>
            <picker mode="time" :value="formData.closeTime" @change="onCloseTimeChange">
              <view class="picker-value">{{ formData.closeTime || '结束时间' }}</view>
            </picker>
          </view>
        </view>
        
        <view class="form-item textarea-item">
          <text class="label">备注信息</text>
          <textarea class="textarea" v-model="formData.remark" placeholder="请输入备注信息（选填）" />
        </view>
      </view>
      
      <!-- 提交按钮 -->
      <view class="submit-btn" @tap="submitForm">提交申请</view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      formData: {
		memberId: '',
        storeName: '',
        logoUrl: '',
        bannerUrl: '',
        phone: '',
        address: '',
        longitude: '',
        latitude: '',
        openTime: '',
        closeTime: '',
        remark: ''
      }
    }
  },
  methods: {
    // 选择图片
    chooseImage(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0]
          
          // 显示上传中
          uni.showLoading({
            title: '上传中...'
          })
          
          // 模拟上传图片
   //        setTimeout(() => {
   //          uni.hideLoading()
            
   //          // 根据类型设置不同的图片URL
   //          if (type === 'logo') {
   //            this.formData.logoUrl = tempFilePath
   //          } else if (type === 'banner') {
   //            this.formData.bannerUrl = tempFilePath
   //          }
			// }, 1000)
            
            // 实际项目中，这里应该调用上传API
            uni.uploadFile({
              url: `${uni.$config.baseUrl}/minio/upload`,
              filePath: tempFilePath,
              name: 'file',
              success: (uploadRes) => {
                const data = JSON.parse(uploadRes.data)
                if (data.code === 200) {
                  if (type === 'logo') {
                    this.formData.logoUrl = data.url
                  } else if (type === 'banner') {
                    this.formData.bannerUrl = data.url
                  }
				  console.log("this.formData.bannerUrl",this.formData.logoUrl)
                } else {
                  uni.showToast({
                    title: '上传失败',
                    icon: 'none'
                  })
                }
              },
              fail: () => {
                uni.showToast({
                  title: '上传失败',
                  icon: 'none'
                })
              },
              complete: () => {
                uni.hideLoading()
              }
            })
        }
      })
    },
    
    // 选择位置
    chooseLocation() {
      // 导航到地址选择页面
      uni.navigateTo({
        url: '/pages/map-select/map-select',
        events: {
          // 监听地址选择页面返回的数据
          selectLocation: (data) => {
            this.formData.address = data.address
            this.formData.latitude = data.latitude
            this.formData.longitude = data.longitude
          }
        }
      })
    },
    
    // 开始时间选择变化
    onOpenTimeChange(e) {
      this.formData.openTime = e.detail.value
    },
    
    // 结束时间选择变化
    onCloseTimeChange(e) {
      this.formData.closeTime = e.detail.value
    },
    
    // 提交表单
    submitForm() {
      // 表单验证
      if (!this.formData.storeName) {
        uni.showToast({
          title: '请输入店铺名称',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.logoUrl) {
        uni.showToast({
          title: '请上传门店Logo',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.bannerUrl) {
        uni.showToast({
          title: '请上传门店头图',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.phone) {
        uni.showToast({
          title: '请输入联系电话',
          icon: 'none'
        })
        return
      }
      
      if (!/^1\d{10}$/.test(this.formData.phone)) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.address) {
        uni.showToast({
          title: '请选择详细地址',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.longitude || !this.formData.latitude) {
        uni.showToast({
          title: '请选择位置获取经纬度',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.openTime || !this.formData.closeTime) {
        uni.showToast({
          title: '请选择营业时间',
          icon: 'none'
        })
        return
      }
      
      // 显示加载中
      uni.showLoading({
        title: '提交中...'
      })
	  
	  // 获取用户信息
	  const userInfoStr = uni.getStorageSync('userInfo')
	  let userInfo = null
	  
	  if (userInfoStr) {
	  	try {
	  		if (typeof userInfoStr === 'string') {
	  			const parsed = JSON.parse(userInfoStr)
	  			if (parsed.code === 200 && parsed.data) {
	  				userInfo = parsed.data
	  			} else {
	  				userInfo = parsed
	  			}
	  		} else {
	  			userInfo = userInfoStr
	  		}
	  	} catch (e) {
	  		console.error('解析用户信息失败', e)
	  		userInfo = userInfoStr
	  	}
	  }

	  this.formData.memberId = userInfo.memberId
      
      // // 模拟提交表单
      // setTimeout(() => {
      //   uni.hideLoading()
        
      //   // 提交成功
      //   uni.showModal({
      //     title: '提交成功',
      //     content: '感谢您的申请，我们的工作人员将在3个工作日内与您联系',
      //     showCancel: false,
      //     success: () => {
      //       // 返回上一页
      //       uni.navigateBack()
      //     }
      //   })
      // }, 1500)
      
      // 实际项目中，这里应该调用API提交表单数据
      uni.request({
        url: `${uni.$config.baseUrl}/franchiseapply/franchiseapply`,
        method: 'POST',
        data: this.formData,
        success: (res) => {
          uni.hideLoading()
          if (res.statusCode === 200 && res.data.code === 200) {
            uni.showModal({
              title: '提交成功',
              content: '感谢您的申请，我们的工作人员将在3个工作日内与您联系',
              showCancel: false,
              success: () => {
                uni.navigateBack()
              }
            })
          } else {
            uni.showToast({
              title: res.data.msg || '提交失败，请稍后重试',
              icon: 'none'
            })
          }
        },
        fail: (err) => {
          uni.hideLoading()
          uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.franchise-apply-container {
  min-height: 100vh;
  background: #F8F8F8;
  padding-bottom: 40rpx;
  
  .form-container {
    margin: 30rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 30rpx;
    
    .form-title {
      font-size: 28rpx;
      color: #666666;
      text-align: center;
      margin-bottom: 40rpx;
    }
    
    .form-group {
      .form-item {
        margin-bottom: 30rpx;
        
        .label {
          display: block;
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 16rpx;
        }
        
        .input {
          width: 100%;
          height: 80rpx;
          background: #F8F8F8;
          border-radius: 8rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
          color: #333333;
        }
        
        .upload-box {
          width: 100%;
          height: 200rpx;
          background: #F8F8F8;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          
          .preview-image {
            width: 100%;
            height: 100%;
          }
          
          .upload-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            
            .upload-icon {
              font-size: 60rpx;
              color: #999999;
              margin-bottom: 10rpx;
            }
            
            .upload-text {
              font-size: 24rpx;
              color: #999999;
            }
          }
        }
        
        .address-input {
          display: flex;
          align-items: center;
          
          .input {
            flex: 1;
          }
          
          .location-btn {
            width: 120rpx;
            height: 80rpx;
            background: #2B87FF;
            color: #FFFFFF;
            font-size: 28rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8rpx;
            margin-left: 20rpx;
          }
        }
        
        .coordinate-box {
          display: flex;
          flex-direction: column;
          
          .coordinate-text {
            font-size: 28rpx;
            color: #333333;
            margin-bottom: 10rpx;
          }
        }
        
        .time-picker {
          display: flex;
          align-items: center;
          
          .picker-value {
            flex: 1;
            height: 80rpx;
            background: #F8F8F8;
            border-radius: 8rpx;
            padding: 0 20rpx;
            font-size: 28rpx;
            color: #333333;
            line-height: 80rpx;
          }
          
          .time-separator {
            margin: 0 20rpx;
            color: #333333;
          }
        }
        
        &.textarea-item {
          .textarea {
            width: 100%;
            height: 200rpx;
            background: #F8F8F8;
            border-radius: 8rpx;
            padding: 20rpx;
            font-size: 28rpx;
            color: #333333;
          }
        }
      }
    }
    
    .submit-btn {
      margin-top: 60rpx;
      height: 88rpx;
      background: #2B87FF;
      border-radius: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      text {
        color: #FFFFFF;
        font-size: 32rpx;
        font-weight: 500;
      }
      
      &:active {
        opacity: 0.9;
      }
    }
  }
}
</style> 